<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #moveImg{
                position: absolute;
                display: none;
            }
            .div1{
                width: 300px;
                height: 200px;
                background-color: yellow;
                border: 2px solid black;
            }
            .div2{
                width: 200px;
                height: 300px;
                background-color:blue;
                border: 4px solid red;
            }
        </style>
        <script>
            function $(id) {
                return document.getElementById(id);
            }
            window.onload = function (){
                //鼠标进入，显示图片
                document.onmouseover = function () {
                    $("moveImg").style.display = "block"
                }
                //鼠标移出，隐藏图片
                document.onmouseout = function () {
                    $("moveImg").style.display = "none"
                }
                //鼠标移动，图片随之移动
                document.onmousemove=function (e) {
                    console.log(e.clientX+" "+e.clientY);
                    $("moveImg").style.left=e.clientX+20+"px";
                    $("moveImg").style.top = e.clientY+20+"px";
                }
            }
            function checkNumber() {
                let a = parseInt($("number").value);
                $("number").value = isNaN(a)?"":a;
            }
        </script>
    </head>
    <body>
        <img src="img/d3.jpg" id="moveImg">
        请输入一个数:<input type="text" id="number" onkeyup="checkNumber()">
        <div id="testDiv" class="div1"></div>
        <input type="button" value="改变样式" onclick="$('testDiv').className = $('testDiv').className=='div1'?'div2':'div1'">
    </body>
</html>